<template>
  <div>
    <tooltip v-if="tips !== ''">
      <template slot="title">{{ tips }}</template>
      <avatar :size="avatarSize" :src="src" />
    </tooltip>
    <avatar v-else :size="avatarSize" :src="src" @click="showImage(src)" />
    <a-modal v-model="visible" title="图片" align="center" :footer ="null">
      <img  :src="src"/>
    </a-modal>
  </div>
</template>

<script>
import Avatar from 'ant-design-vue/es/avatar'
import Tooltip from 'ant-design-vue/es/tooltip'

export default {
  name: 'AvatarItem',
  components: {
    Avatar,
    Tooltip
  },
  props: {
    tips: {
      type: String,
      default: '',
      required: false
    },
    src: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      size: this.$parent.size
    }
  },
  computed: {
    avatarSize () {
      return this.size !== 'mini' && this.size || 20
    }
  },
  methods: {
    showImage (column) { // 显示图片
      this.visible = true;
      this.src = column;
    },
  },
  watch: {
    '$parent.size' (val) {
      this.size = val
    }
  }
}
</script>
